<template>
  <div>
    <!-- banner图 -->
    <div class="header-img">
      <span class="header-img-text">河北省网联可信数据空间综合服务平台</span>
    </div>
    <div class="brand_container">
      <!-- 需求发布 -->
      <div class="requirement-release">
        <p class="underline">发布流程</p>
        <div class="process-box bgc">
          <ul class="process">
            <li class="process-item">
              <span class="process-item-text">需求发布</span>
              <i class="icon el-icon-upload"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">平台受理</span>
              <i class="icon el-icon-s-platform"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">服务商参与</span>
              <i class="icon el-icon-s-custom"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">成交登记</span>
              <i class="icon el-icon-s-claim"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">交易所选择</span>
              <i class="icon el-icon-s-flag"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">资产登记</span>
              <i class="icon el-icon-edit-outline"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">资源入表</span>
              <i class="icon el-icon-s-order"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">金融服务</span>
              <i class="icon el-icon-s-cooperation"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 需求列表 -->
      <div class="requirement-list bgc">
        <el-tabs v-model="activeName" @tab-click="clickTab">
          <!-- 机构搜索 -->
          <el-form :inline="true" label-width="50px" style="margin-left: 15px">
            <el-form-item style="margin-left: 15px" prop="company">
              <el-input
                placeholder="请输入机构名称"
                v-model="queryParams.bodyName"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 15px" prop="industry">
              <div class="block">
                <el-cascader
                  v-model="queryParams.industry"
                  :props="options"
                  :show-all-levels="false"
                  @change="handleIndustryChange"
                  placeholder="请选择所属行业"
                  clearable
                ></el-cascader>
              </div>
            </el-form-item>
            <el-form-item style="margin-left: 15px" prop="area">
              <div class="block">
                <el-cascader
                  v-model="queryParams.businessAddress"
                  :props="addressList"
                  @change="handleAreaChange"
                  placeholder="请选择所在地区"
                  clearable
                ></el-cascader>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="Search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <el-tab-pane
            v-for="items in roleList"
            :key="items.id"
            :name="items.id"
            :id="items.id"
            :label="items.roleName"
          >
          <!-- 骨架屏 -->
            <el-skeleton :loading="loading">
              <template slot="template">
                <div class="list-box">
                  <ul class="list">
                    <li
                      class="skeleton-list-item"
                      v-for="item in 3"
                      :key="item"
                    >
                      <el-skeleton-item
                        variant="rect"
                        style="width: 400px; height: 240px"
                      />
                    </li>
                  </ul>
                </div>
              </template>
            </el-skeleton>
            <!-- 机构列表 -->
            <div class="list-box">
              <el-empty v-if="dataList.length === 0" :image-size="200"></el-empty>
              <ul v-else class="list">
                <li
                  class="list-item"
                  v-for="(item, index) in dataList"
                  :key="index"
                  @click="GohomePage(item.userId)"
                >
                  <img class="userImg" src="../assets/image/user.png" alt="" />
                  <div class="brandDetail">
                    <div class="title">{{ item.bodyName }}</div>
                    <div class="details">
                      <span class="jieshao"
                        ><i class="el-icon-user"></i> 企业介绍</span
                      >
                      <p class="introduce">{{ item.introduce }}</p>
                      <span class="tel"
                        ><i class="el-icon-phone"></i> {{ item.phone }}</span
                      >
                      <div class="view-details">
                        <p class="rating-badge">评分：{{item.finalScore}}</p>
                        <p>查看详情<i class="el-icon-right"></i></p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[1, 3, 4, 6]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 页面底部 -->
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { brandList, roleList, getIndustryById, address } from "@/api/api";
export default {
  data() {
    return {
      loading: true,
      queryParams: {
        roleId: 2,
        industry: "",
        bodyName: "",
        businessAddress: "",
        pageSize: 3,
        pageNum: 1,
      },
      // 经营地址列表
      addressList: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, value } = node;
          const path = value || 0; // 这里替换为你需要的动态值

          try {
            // 发送请求获取数据，拼接路径
            const response = await address(path);
            // 检查响应数据
            // console.log('Response data:', response);
            // 整理数据
            const showData = response.data.data.map((item) => ({
              value: item.code,
              label: item.name,
              leaf: level >= 2, // 假设三级级联，超过二级的节点为叶子节点
            }));
            // 注入组件需要展示的数据
            resolve(showData);
          } catch (error) {
            // 发生错误时调用 resolve 返回空数组
            resolve([]);
          }
        },
      },
      // 所属行业列表
      options: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, value } = node;
          const path = value || 0; // 这里替换为你需要的动态值

          try {
            // 发送请求获取数据，拼接路径
            const response = await getIndustryById(path);
            // 检查响应数据
            // console.log('Response data:', response);
            // 整理数据
            const showData = response.data.data.data.map((item) => ({
              value: item.categoryId,
              label: item.categoryName,
              leaf: level >= 1, // 假设三级级联，超过二级的节点为叶子节点
            }));
            // 注入组件需要展示的数据
            resolve(showData);
          } catch (error) {
            // 发生错误时调用 resolve 返回空数组
            resolve([]);
          }
        },
      },
      activeName: "2",
      dataList: [],
      roleList: [],
      total: 0,
    };
  },
  props: {},
  computed: {},
  methods: {
    GohomePage(userId) {
      this.$router.push(`/BrandDetail?userId=${userId}`);
    },
    clickTab(item) {
      this.queryParams.roleId = item.$attrs.id;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 搜索查询
    Search() {
      this.getList();
    },
    // 获取机构列表
    getList() {
      this.queryParams.industry += "";
      this.queryParams.businessAddress += "";
      this.loading = true;
      brandList(this.queryParams)
        .then((result) => {
          this.dataList = result.data.data.userDetailInfo;
          this.total = result.data.data.total;
          console.log(result);
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false; // 加载完成后设置为false
        });
    },
    // 获取角色列表
    getRoleList() {
      roleList()
        .then((res) => {
          this.roleList = res.data.data;
        })
        .catch((err) => {});
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },

    handleIndustryChange(value) {},
    handleAreaChange(value) {},
  },
  created() {
    if (this.$route.query.type != undefined) {
      this.activeName = this.$route.query.type;
      this.queryParams.roleId = Number(this.activeName);
      this.getList();
    }
    this.getRoleList();
    this.getList();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}

.header-img {
  height: 300px;
  background-image: url("../assets/image/xuqiu.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.header-img::after {
  content: "不忘初心，推动数字经济高质量发展";
  font-size: 65px;
  color: #fff;
  position: absolute;
  top: 50px;
  left: 400px;
  white-space: pre-line;
  font-weight: 500;
}
.header-img-text {
  position: absolute;
  top: 150px;
  left: 600px;
  font-size: 35px;
  color: #fff;
}
.brand_container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 25px auto;
  height: 100%;
  .bgc {
    border-radius: 10px;
    box-shadow: -2px 2px 5px #e0e9fd;
    background-color: #f9fbff;
  }
  .requirement-release {
    width: 1296px;
    margin: 20px 0;
    padding: 15px 5px 15px 0;
    .underline {
      width: 80px;
      position: relative;
      font-size: 20px;
      font-weight: bold;
      color: #35445e;
    }
    // .underline::after {
    //   content: "";
    //   position: absolute;
    //   bottom: -5px;
    //   left: 5px;
    //   width: 100%;
    //   height: 6px;
    //   border-radius: 25px;
    //   background: linear-gradient(to right, #5ca6f9, #f9fcfe); /* 渐变色 */
    // }
    .process-box {
      margin-top: 5px;
      padding: 15px;
      height: 110px;
      // background-color: #fff;
      // border-radius: 10px;
    }
    .process {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }
    .process-item {
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      // box-shadow: 2px -2px 6px #f9fbff;
    }
    .arrow {
      font-size: 18px;
      font-weight: bold;
      color: #0f40f5;
    }
    .process-item-text {
      position: relative;
      color: #0f40f5;
      font-size: 18px;
      font-weight: bold;
    }
    // .process-item-text::after {
    //   z-index: 1;
    //   content: "";
    //   position: absolute;
    //   bottom: -5px;
    //   left: -8px;
    //   width: 100%;
    //   height: 6px;
    //   border-radius: 25px;
    //   background: linear-gradient(to right, #5ca6f9, #f9fcfe); /* 渐变色 */
    // }
    .icon {
      text-align: center;
      width: 50px;
      font-size: 35px;
      color: #0f40f5;
    }
  }
  .requirement-list {
    width: 1296px;
    padding: 15px 0 15px 0;
    // padding-top: 15px;
    /deep/.el-tabs__content{
      min-height: 372px;
    }
    /deep/.el-tabs__nav-wrap {
      min-height: 55px;
      margin: 0 15px;
      background-color: #fff;
      padding-left: 15px;
      padding-top: 15px;

      .el-tabs__active-bar {
        color: #000;
        border-bottom: 2px solid #4869e2 !important;
      }
      .el-tabs__item {
        padding: 0 50px;
        color: #bfbec7;
      }
      .el-tabs__item.is-active {
        color: #000;
      }
      .el-tabs__item:nth-child(2) {
        padding-left: 0;
      }
    }
    /deep/.el-tabs__nav-wrap::after {
      left: 15px;
      width: 98%;
    }

    .list-box {
      margin-top: 15px;
      padding-bottom: 30px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .list {
        margin: 0 auto;
        padding-left: 5px;
        width: 1260px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 25px;
        .skeleton-list-item {
          width: 400px;
          height: 240px;
        }
        .list-item {
          position: relative;
          width: 400px;
          height: 240px;
          color: #5c6b82 !important;
          margin-bottom: 25px;
          border-radius: 10px;
          background-image: url("../assets/image/icon-99.png");
          background-blend-mode: screen;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          box-shadow: 0 0 10px #bdbdbd;
          padding: 20px 15px 10px 15px;

          .userImg {
            width: 60px;
            position: absolute;
            top: 15px;
            right: 20px;
          }

          .brandDetail {
            display: flex;
            align-items: center;
            flex-direction: column;

            .title {
              width: 250px;
              text-align: center;
              font-size: 22px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .details {
              width: 370px;
              height: 130px;
              img {
                width: 14px;
              }
              .introduce {
                width: 370px;
                height: 42px;
                margin: 15px 0 25px 0;
                font-size: 14px;
                text-indent: 2em;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .tel {
                font-size: 14px;
              }
              .view-details {
                margin: 15px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .rating-badge {
                  padding: 2px 5px;
                  font-size: 12px;
                }
              }
            }
          }
        }
        .list-item:hover {
          width: 400px;
          height: 240px;
          cursor: pointer;
          color: #fff !important;
          margin-bottom: 25px;
          border-radius: 10px;
          background-image: url("../assets/image/xinxi1.png");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-color: rgba(52, 99, 248, 0.8);
          background-blend-mode: color-burn;
          box-shadow: 0 0 10px #bdbdbd;
        }
      }
    }
    .pagination {
      left: 50%;
      bottom: 0;
      width: 415px;
      margin: 20px auto;
      // background-color: #fff;
      padding: 5px;
    }
  }
}
</style>